<template>
  <div>
    <h2>音乐列表--{{id}}</h2>
    <!-- 音乐列表顶部区域------------------- -->
    <div class="header">
      <!-- 定位--脱离文档流 -->
      <div class="bg" ref="bg"></div>
      <!-- 容器内容 -->
      <div class="wrap">
        <div class="left">
          <img :src="author.imgUrl" alt />
        </div>
        <div class="right">
          <div class="title">{{author.name}}</div>
          <div class="author">
            <img :src="author.creator.avatarUrl" alt />
            <span>{{author.creator.nickname}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 音乐列表布局---------------------- -->
    <div class="info">歌曲列表</div>
    <List :musicList="musicList" />
    <!-- 音乐评论 ---------------------------->
    <div class="comments">
      <h4 class="cmt_title">最新评论({{total}})</h4>
      <div class="cmt_list">
        <div class="cmt_item" v-for="ele in comments" :key="ele.commentId">
          <div class="cmt_head">
            <img :src="ele.user.avatarUrl" alt />
          </div>
          <div class="cmt_wrap f-bd f-bd-btm">
            <div class="cmt_header">
              <div class="cmt_meta">
                <div class="user">
                  {{ele.user.nickname}}
                  <!--  vip-associator 如果是vip用户 具有这个class名称 -->
                  <i class="vip" :class='{"vip-associator":ele.user.vipRights.redVipLevel!=0}'></i>
                </div>
                <div class="time">{{ele.timeStr}}</div>
              </div>
              <div class="cmt_like">
                <span v-show="ele.likedCount">{{ele.likedCount}}</span>
                <img src="../../assets/images/zan.png" alt />
              </div>
            </div>
            <div class="cmt_content">{{ele.content}}</div>
          </div>
        </div>

        <!-- 静态itme每一项布局 -->
        <!-- <div class="cmt_item">
          <div class="cmt_head">
            <img
              src="http://p2.music.126.net/AfZXZh2gh85KsggJDoI_yQ==/109951168725769298.jpg?imageView=1&type=webp&thumbnail=60x0"
              alt
            />
          </div>
          <div class="cmt_wrap f-bd f-bd-btm">
            <div class="cmt_header">
              <div class="cmt_meta">
                <div class="user">名称</div>
                <div class="time">10:13</div>
              </div>
              <div class="cmt_like">
                <img src="../../assets/images/zan.png" alt />
              </div>
            </div>
            <div class="cmt_content">无趣厌烦的现实生活 虚拟孤单的网络.</div>
          </div>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../../api";
import List from "./List.vue";
export default {
  props: ["id"],
  components: {
    List
  },
  data() {
    return {
      author: {
        //头像
        // imgUrl: "",
        // name: ""
        creator: {}
      },
      musicList: [], //歌曲列表
      total: 0, //评论的总数
      comments: [] //评论列表数据展示
    };
  },
  created() {
    // console.log(document.querySelector('.bg'));//null
    // console.log(this.$refs.bg);//undefined
    //ES6 Promise().then()
    // axios.getMusicList({id:this.id})
    // .then(res=>{
    //   console.log(res.data);
    // })

    //调用外部的方法
    this.getMusicList();
    //评论接口
    this.getComments();
  },
  methods: {
    //定义一个方法--请求axios-获取音乐列表--------
    async getMusicList() {
      let res = await axios.getMusicList();
      console.log("es6-async-await ", res.data);
      let data = res.data.playlist;
      // console.log(document.querySelector('.bg'));//null
      console.log(this.$refs.bg); //undefined
      //1. 解析数据里面的背景图设置
      this.$refs.bg.style.backgroundImage = `url(${data.coverImgUrl})`;
      //2. 存储data变量---修改数组和对象 视图不更新  1.替换  2. Vue.set(target,'属性或者下标','值')  this.$set()
      let obj = {};
      obj.imgUrl = data.coverImgUrl;
      obj.name = data.name;
      obj.creator = data.creator;
      this.author = obj;
      //3. 获取音乐数据列表数据----歌曲列表----
      this.musicList = data.tracks;
      console.log(data.tracks);
      console.log("datadata-", data);
    },
    //定义方法--获取评论接口-=---------------------
    async getComments() {
      let res = await axios.getComments({ id: this.id });
      console.log("获取评论接口-=--", res.data);
      this.total = res.data.total;
      this.comments = res.data.comments;
      console.log("this.comments---", this.comments);
    }
  }
};
</script>

<style scoped lang='less'>
.header {
  position: relative;
  height: 3.72rem;
  // background: pink;
  overflow: hidden;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: blur(20px);
    filter: blur(20px);
    background-position: 50%;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
  .wrap {
    display: flex;
    padding: 0.6rem;
    .left {
      img {
        width: 2.52rem;
        height: 2.52rem;
        padding-right: 0.4rem;
      }
    }
    .right {
      flex: 1;
      font-size: 17px;
      line-height: 1.3;
      color: #fefefe;
    }
    .author {
      padding-top: 0.4rem;
      color: hsla(0, 0%, 100%, 0.7);
      font-size: 14px;
      img {
        width: 0.6rem;
        height: 0.62rem;
        border-radius: 50%;
        margin-right: 0.16rem;
      }
    }
  }
}
.info {
  height: 23px;
  line-height: 23px;
  padding: 0 10px;
  font-size: 12px;
  color: #666;
  background-color: #eeeff0;
}

// 评论
.comments {
  .cmt_title {
    margin: 0;
    color: #666;
    font-size: 12px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.05);
    padding: 0 10px;
    height: 23px;
    line-height: 23px;
  }
  .cmt_item {
    display: flex;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    background: #fff;
    .cmt_head {
      overflow: hidden;
      padding: 0 0.2rem;
      img {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
      }
    }
    .cmt_wrap {
      flex: 1;
      .cmt_header {
        display: flex;
        .cmt_meta {
          flex: 1;
          .user {
            font-size: 14px;
            color: #666;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            -webkit-box-flex: 1;
            -webkit-flex: auto;
            flex: auto;
            -webkit-box-flex: 0;
            .vip {
              -webkit-flex: 0 0 auto;
              flex: 0 0 auto;
              display: inline-block;
              margin: 0 5px;
            }
            .vip-associator {
              width: 21px;
              height: 11px;
              background: url(//p1.music.126.net/OeOahPin96CFyHmEnH2grA==/109951163446555771.png)
                0 0 / contain no-repeat;
            }
          }
          .time {
            font-size: 9px;
            color: #999;
          }
        }
        .cmt_like {
          width: 1.3rem;
          height: 0.44rem;
          line-height: 0.44rem;
          font-size: 11px;
          color: #999;
          text-align: right;
        }
      }
      .cmt_content {
        color: #333;
        font-size: 15px;
        line-height: 22px;
        margin-top: 5px;
      }
    }
  }
}
</style>